<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>

    <title>许愿神灯</title>
    <link rel="stylesheet" href="../common/css/normalize.css">
    <link rel="stylesheet" href="../common/css/common.min.css">
    <link rel="stylesheet" href="../common/css/iconfont.css">
    <link rel="stylesheet" href="css/alasd.min.css">
</head>
<body>
    <div id="light">
        <div class="light">
            <img onclick="takeLottery()"  src="img/light.png" >
        </div>
        <div class="col">
            <div class="col">
                <div class="fz15 chance text-center" >
                    (你还有<span id="restNum">0</span>次召唤机会)
                </div>
                <p class="intro mt10 fz14">神灯带来了丰厚的礼物，摩擦神灯数秒，就有机会 召唤出灯神，拿到礼物.</p>
            </div>
        </div>
        <div class="toast" id="success-page" style="display: none;">
            <div class="bg"></div>
            <div class="con text-center">
                <div class="win">
                    <div class="prize prize-step1" id="middle-box" style="display: none;">
                        <p class="hui666">感谢你解救了我<br>如你所愿，送你一个礼物</p>
                        <a class="btn btn-blue" onclick="lookLottery()">看看礼物是什么</a>
                    </div>
                    <div class="prize prize-step2" id="lottery-win-box" style="display: none;">
                        <div class="fz22 gongxi">恭喜你! </div>
                        <p class="prize-name">获得<span id="win-prize-name"></span></p>
                        <img class="prize-img" id="win-prize-img" src="img/prize.jpg" >
                        <p class="hui666 prize-name">有效期：<span id="win-prize-date"></span></p>
                        <div class="close">
                            <i class="iconfont icon-close" onclick="closeSuccess()"></i>
                        </div>
                     </div>
                </div>
            </div>
        </div>

        <div class="toast" id="fail-page" style="display: none;">
            <div class="bg"></div>
            <div class="con text-center">
                <div class="win" >
                    <div class="prize prize-lose">
                        <p class="hui666">召唤失败，神灯可能睡着了</p>
                        <a class="btn btn-blue" onclick="closeFail()">再召唤一次</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
	<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="../utils/http-service.js"></script>
	<script>
        onToast('游戏数据获取中')
        //游戏名称
        window.gameName = 'alasd';
		//判断用户是否有抽奖(游戏)资格
        api.eligibleToPlay(function (val) {
            offToast();
            console.log(val)
            $('#restNum').text(val);
        });
        //获取活动参数
        api.getGameConfig(gameName);

        function takeLottery() {
            if (limitNum <= 0) {
                Toast('抽奖次数不够');
                return;
            }
            $('#restNum').text(--limitNum);
            onToast('召唤中..');
            api.lottery(gameName, function(res){
                offToast();
                if (res.data.is_winning) {
                    var prize = res.data.prize;
                    $('#win-prize-name').text(prize.name);
                    $('#win-prize-img').attr('src',prize.image);
                    $('#win-prize-date').text(prize.expired_start_date+'/'+prize.expired_end_date);
                    $('#success-page,#middle-box').show();
                } else {
                    $('#fail-page').show();
                }
            })
        }
        function lookLottery() {
            $('#lottery-win-box').show();
            $('#middle-box').hide();
        }
        function closeSuccess() {
            $('#lottery-win-box,#success-page').hide();
        }
        function closeFail() {
            $('#fail-page').hide();
        }
	</script>
</body>
</html>